<template>
        <div class="max-w-3xl mx-auto">
            <h1 class="text-3xl font-bold text-white mb-10 text-center">文章分类</h1>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <template v-for="category in categories" :key="category.name">
                    <router-link :to="{ path: '/posts', query: { category: category.name } }" class="block group">
                        <div class="bg-dark-light rounded-xl p-6 border border-gray-custom h-full flex items-center space-x-4 card-hover">
                            <div class="w-16 h-16 rounded-full flex items-center justify-center" :style="{ backgroundColor: category.color + '20' }">
                                <i class="fa" :class="getCategoryIcon(category.name)" :style="{ color: category.color }"></i>
                            </div>
                            <div>
                                <h2 class="text-xl font-bold text-white group-hover:text-primary transition-colors">{{ category.name }}</h2>
                                <p class="text-gray-400 text-sm mt-1">{{ category.count }} 篇文章</p>
                            </div>
                            <div class="ml-auto text-gray-500 group-hover:text-primary transition-colors">
                                <i class="fa fa-arrow-right"></i>
                            </div>
                        </div>
                    </router-link>
                </template>
            </div>
        </div>
    </template>

    <script setup>
    // 使用默认导入方式
    import categories from '@/data/categories';
    
    const getCategoryIcon = (categoryName) => {
        switch(categoryName) {
            case "3D打印": return "fa-cube";
            case "电子DIY": return "fa-microchip";
            case "智能家居": return "fa-code";
            case "工具评测": return "fa-star";
            case "项目分享": return "fa-lightbulb-o";
            default: return "fa-folder-o";
        }
    };
    </script>
